<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>食光集 - 首页</title>
    <!-- Tailwind CSS CDN -->
    <script src="https://cdn.tailwindcss.com"></script>
    <!-- Font Awesome -->
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
    <!-- 自定义配置 -->
    <script>
        tailwind.config = {
            theme: {
                extend: {
                    colors: {
                        primary: '#FF9AA2', // 可爱粉色
                        secondary: '#FFB7B2', // 浅粉色
                        accent: '#FFDAC1', // 橙色
                        light: '#E2F0CB', // 浅绿色
                        dark: '#B5EAD7', // 深绿色
                    },
                    fontFamily: {
                        sans: ['PingFang SC', 'Helvetica Neue', 'Arial', 'sans-serif'],
                    },
                }
            }
        }
    </script>
    <style>
        /* 自定义样式 */
        .glass-effect {
            background: rgba(255, 255, 255, 0.25);
            backdrop-filter: blur(4px);
            -webkit-backdrop-filter: blur(4px);
            border: 1px solid rgba(255, 255, 255, 0.18);
        }
        .nav-tab {
            position: relative;
            transition: all 0.3s ease;
        }
        .nav-tab.active {
            color: #FF9AA2;
        }
        .nav-tab.active::after {
            content: '';
            position: absolute;
            bottom: -5px;
            left: 50%;
            transform: translateX(-50%);
            width: 20px;
            height: 3px;
            background-color: #FF9AA2;
            border-radius: 3px;
        }
        .recipe-card {
            transition: transform 0.3s;
        }
        .recipe-card:hover {
            transform: translateY(-5px);
        }
        
        /* 点赞特效 */
        @keyframes likeAnimation {
            0% { transform: scale(1); }
            50% { transform: scale(1.3); }
            100% { transform: scale(1); }
        }
        
        .like-animation {
            animation: likeAnimation 0.5s ease;
        }
        
        /* 点赞按钮样式 */
        .like-button {
            position: relative;
            z-index: 10;
        }
        
        .like-button.liked {
            color: #FF9AA2;
        }
        
        .like-button.liked i {
            color: #FF9AA2;
        }
        
        /* 轮播图样式 */
        .carousel {
            position: relative;
            overflow: hidden;
            border-radius: 1rem;
        }
        
        .carousel-inner {
            display: flex;
            transition: transform 0.5s ease;
        }
        
        .carousel-item {
            flex: 0 0 100%;
        }
        
        .carousel-indicators {
            position: absolute;
            bottom: 1rem;
            left: 50%;
            transform: translateX(-50%);
            display: flex;
            gap: 0.5rem;
        }
        
        .carousel-indicator {
            width: 0.5rem;
            height: 0.5rem;
            border-radius: 50%;
            background-color: rgba(255, 255, 255, 0.5);
            cursor: pointer;
        }
        
        .carousel-indicator.active {
            background-color: white;
        }
        
        /* 烹饪挑战样式 */
        .challenge-card {
            position: relative;
            overflow: hidden;
            border-radius: 1rem;
        }
        
        .challenge-overlay {
            position: absolute;
            bottom: 0;
            left: 0;
            right: 0;
            background: linear-gradient(to top, rgba(0,0,0,0.7), transparent);
            padding: 1rem;
            color: white;
        }
        
        /* 烹饪进度样式 */
        .progress-ring {
            transform: rotate(-90deg);
        }
        
        .progress-ring-circle {
            transition: stroke-dashoffset 0.5s ease;
        }
        
        /* 成就徽章样式 */
        .achievement-badge {
            position: relative;
            transition: all 0.3s ease;
        }
        
        .achievement-badge:hover {
            transform: translateY(-3px);
        }
        
        .achievement-badge.locked {
            opacity: 0.5;
        }
    </style>
</head>
<body class="bg-gradient-to-b from-pink-50 to-white">
    <!-- 顶部导航栏 -->
    <nav class="fixed top-0 left-0 right-0 bg-white/80 backdrop-blur-md shadow-sm z-50">
        <div class="container mx-auto px-4 py-3 flex justify-between items-center">
            <h1 class="text-xl font-bold text-gray-800">食光集</h1>
            <div class="flex items-center space-x-4">
                <a href="profile.html" class="text-gray-600 hover:text-gray-900">
                    <i class="fas fa-user"></i>
                </a>
            </div>
        </div>
    </nav>

    <!-- 内容区域 -->
    <div class="container mx-auto px-4 pt-20 pb-24">
        <!-- 欢迎区域 -->
        <div class="glass-effect rounded-xl p-3 mb-4">
            <div class="flex items-center">
                <div class="w-12 h-12 rounded-full overflow-hidden mr-3">
                    <img src="https://images.unsplash.com/photo-1494790108377-be9c29b29330?ixlib=rb-1.2.1&auto=format&fit=crop&w=500&q=60" alt="用户头像" class="w-full h-full object-cover">
                </div>
                <div>
                    <h2 class="text-lg font-bold text-gray-800">你好，小厨师！</h2>
                    <p class="text-sm text-gray-600">今天想做什么美味呢？</p>
                </div>
            </div>
        </div>

        <!-- 轮播图 -->
        <div class="mb-6">
            <div class="carousel">
                <div class="carousel-inner">
                    <div class="carousel-item">
                        <img src="https://images.unsplash.com/photo-1504674900247-0877df9cc836?ixlib=rb-1.2.1&auto=format&fit=crop&w=1350&q=80" alt="美食轮播图" class="w-full h-48 object-cover">
                        <div class="absolute bottom-0 left-0 right-0 p-4 bg-gradient-to-t from-black/70 to-transparent">
                            <h3 class="text-white font-bold">今日推荐：香煎三文鱼</h3>
                        </div>
                    </div>
                    <div class="carousel-item">
                        <img src="https://images.unsplash.com/photo-1476224203421-9ac39bcb3327?ixlib=rb-1.2.1&auto=format&fit=crop&w=1350&q=80" alt="美食轮播图" class="w-full h-48 object-cover">
                        <div class="absolute bottom-0 left-0 right-0 p-4 bg-gradient-to-t from-black/70 to-transparent">
                            <h3 class="text-white font-bold">本周热门：意式肉酱面</h3>
                        </div>
                    </div>
                    <div class="carousel-item">
                        <img src="https://images.unsplash.com/photo-1512621776951-a57141f2eefd?ixlib=rb-1.2.1&auto=format&fit=crop&w=1350&q=80" alt="美食轮播图" class="w-full h-48 object-cover">
                        <div class="absolute bottom-0 left-0 right-0 p-4 bg-gradient-to-t from-black/70 to-transparent">
                            <h3 class="text-white font-bold">健康选择：彩虹沙拉</h3>
                        </div>
                    </div>
                </div>
                <div class="carousel-indicators">
                    <div class="carousel-indicator active"></div>
                    <div class="carousel-indicator"></div>
                    <div class="carousel-indicator"></div>
                </div>
            </div>
        </div>

        <!-- 烹饪挑战 -->
        <div class="mb-6">
            <div class="flex justify-between items-center mb-3">
                <h2 class="text-xl font-bold text-gray-800">烹饪挑战</h2>
                <a href="#" class="text-primary text-sm">查看全部</a>
            </div>
            <div class="grid grid-cols-2 gap-3">
                <div class="challenge-card glass-effect overflow-hidden">
                    <img src="https://images.unsplash.com/photo-1568901346375-23c9450c58cd?ixlib=rb-1.2.1&auto=format&fit=crop&w=1350&q=80" alt="挑战" class="w-full h-32 object-cover">
                    <div class="challenge-overlay">
                        <h3 class="font-bold">周末烘焙挑战</h3>
                        <p class="text-xs">已有 128 人参与</p>
                    </div>
                </div>
                <div class="challenge-card glass-effect overflow-hidden">
                    <img src="https://images.unsplash.com/photo-1565299624946-b28f40a0ae38?ixlib=rb-1.2.1&auto=format&fit=crop&w=1350&q=80" alt="挑战" class="w-full h-32 object-cover">
                    <div class="challenge-overlay">
                        <h3 class="font-bold">意面大师挑战</h3>
                        <p class="text-xs">已有 89 人参与</p>
                    </div>
                </div>
            </div>
        </div>

        <!-- 烹饪进度与个人成就 -->
        <div class="bg-white rounded-2xl shadow-sm p-6 mb-6">
            <h2 class="text-xl font-bold text-gray-800 mb-4">烹饪进度</h2>
            <div class="flex items-center">
                <div class="w-20 h-20 rounded-full bg-red-100 flex items-center justify-center mr-4">
                    <i class="fas fa-utensils text-red-500 text-3xl"></i>
                </div>
                <div>
                    <h3 class="text-lg font-bold text-gray-800">烹饪新手</h3>
                    <p class="text-gray-600">已完成 2/3 道菜</p>
                    <div class="w-full bg-gray-200 rounded-full h-2 mt-2">
                        <div class="bg-red-500 h-2 rounded-full" style="width: 66%"></div>
                    </div>
                </div>
                <a href="achievement.html" class="ml-auto text-primary text-sm flex items-center">
                    查看详情
                    <i class="fas fa-arrow-right ml-1"></i>
                </a>
            </div>
        </div>

        <!-- 每日食谱推荐 -->
        <div class="mb-6">
            <div class="flex justify-between items-center mb-3">
                <h2 class="text-xl font-bold text-gray-800">今日食谱</h2>
                <a href="#" class="text-primary text-sm">更多推荐</a>
            </div>
            <div class="bg-white rounded-2xl shadow-sm overflow-hidden">
                <img src="https://images.unsplash.com/photo-1546069901-ba9599a7e63c?ixlib=rb-1.2.1&auto=format&fit=crop&w=1350&q=80" alt="今日食谱" class="w-full h-48 object-cover">
                <div class="p-4">
                    <div class="flex items-center justify-between mb-2">
                        <h3 class="text-lg font-bold text-gray-800">香煎三文鱼配时蔬</h3>
                        <span class="text-sm text-gray-500">15分钟</span>
                    </div>
                    <p class="text-gray-600 text-sm mb-3">简单易做，营养丰富，适合忙碌的工作日</p>
                    <div class="flex items-center justify-between">
                        <div class="flex items-center">
                            <i class="fas fa-fire text-orange-500 mr-1"></i>
                            <span class="text-sm text-gray-600">中等难度</span>
                        </div>
                        <button class="bg-primary text-white px-4 py-2 rounded-full text-sm hover:bg-opacity-90 transition">
                            开始烹饪
                        </button>
                    </div>
                </div>
            </div>
        </div>

        <!-- 烹饪小贴士 -->
        <div class="mb-6">
            <div class="flex justify-between items-center mb-3">
                <h2 class="text-xl font-bold text-gray-800">烹饪小贴士</h2>
                <a href="#" class="text-primary text-sm">更多技巧</a>
            </div>
            <div class="grid grid-cols-2 gap-3">
                <div class="bg-white rounded-xl shadow-sm p-4">
                    <div class="w-10 h-10 rounded-full bg-pink-100 flex items-center justify-center mb-3">
                        <i class="fas fa-lightbulb text-pink-500"></i>
                    </div>
                    <h3 class="text-sm font-bold text-gray-800 mb-1">食材保鲜</h3>
                    <p class="text-xs text-gray-600">蔬菜保鲜小技巧，让食材更新鲜</p>
                </div>
                <div class="bg-white rounded-xl shadow-sm p-4">
                    <div class="w-10 h-10 rounded-full bg-green-100 flex items-center justify-center mb-3">
                        <i class="fas fa-clock text-green-500"></i>
                    </div>
                    <h3 class="text-sm font-bold text-gray-800 mb-1">时间管理</h3>
                    <p class="text-xs text-gray-600">高效烹饪，节省时间的小窍门</p>
                </div>
            </div>
        </div>

        <!-- 社区动态 -->
        <div class="mb-6">
            <div class="flex justify-between items-center mb-3">
                <h2 class="text-xl font-bold text-gray-800">社区动态</h2>
                <a href="#" class="text-primary text-sm">更多动态</a>
            </div>
            <div class="space-y-3">
                <div class="bg-white rounded-xl shadow-sm p-4">
                    <div class="flex items-center mb-3">
                        <img src="https://images.unsplash.com/photo-1438761681033-6461ffad8d80?ixlib=rb-1.2.1&auto=format&fit=crop&w=500&q=60" alt="用户头像" class="w-8 h-8 rounded-full mr-3">
                        <div>
                            <h3 class="text-sm font-bold text-gray-800">美食达人</h3>
                            <p class="text-xs text-gray-500">刚刚完成了香煎三文鱼</p>
                        </div>
                    </div>
                    <img src="https://images.unsplash.com/photo-1546069901-ba9599a7e63c?ixlib=rb-1.2.1&auto=format&fit=crop&w=1350&q=80" alt="美食图片" class="w-full h-32 object-cover rounded-lg mb-3">
                    <div class="flex items-center justify-between">
                        <div class="flex items-center space-x-4">
                            <button class="like-button text-gray-400 hover:text-primary">
                                <i class="far fa-heart"></i>
                                <span class="text-xs ml-1">128</span>
                            </button>
                            <button class="text-gray-400 hover:text-primary">
                                <i class="far fa-comment"></i>
                                <span class="text-xs ml-1">32</span>
                            </button>
                        </div>
                        <button class="text-gray-400 hover:text-primary">
                            <i class="far fa-share-square"></i>
                        </button>
                    </div>
                </div>
            </div>
        </div>

        <!-- 节日特辑 -->
        <div class="mb-6">
            <div class="flex justify-between items-center mb-3">
                <h2 class="text-xl font-bold text-gray-800">节日特辑</h2>
                <a href="#" class="text-primary text-sm">更多节日</a>
            </div>
            <div class="bg-gradient-to-r from-pink-500 to-orange-500 rounded-2xl p-4 text-white">
                <div class="flex items-center justify-between mb-3">
                    <div>
                        <h3 class="text-lg font-bold">情人节特辑</h3>
                        <p class="text-sm opacity-90">浪漫晚餐食谱</p>
                    </div>
                    <div class="w-12 h-12 rounded-full bg-white/20 flex items-center justify-center">
                        <i class="fas fa-heart text-xl"></i>
                    </div>
                </div>
                <div class="grid grid-cols-2 gap-2">
                    <div class="bg-white/20 rounded-lg p-2">
                        <img src="https://images.unsplash.com/photo-1512621776951-a57141f2eefd?ixlib=rb-1.2.1&auto=format&fit=crop&w=500&q=60" alt="食谱" class="w-full h-20 object-cover rounded-lg mb-1">
                        <p class="text-xs font-bold">心形牛排</p>
                    </div>
                    <div class="bg-white/20 rounded-lg p-2">
                        <img src="https://images.unsplash.com/photo-1568901346375-23c9450c58cd?ixlib=rb-1.2.1&auto=format&fit=crop&w=500&q=60" alt="食谱" class="w-full h-20 object-cover rounded-lg mb-1">
                        <p class="text-xs font-bold">巧克力蛋糕</p>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <!-- 底部导航栏 -->
    <div class="fixed bottom-0 left-0 right-0 bg-white/80 backdrop-blur-md py-2 px-4 flex justify-around items-center shadow-sm">
        <a href="index.html" class="nav-tab active flex flex-col items-center">
            <i class="fas fa-home text-xl"></i>
            <span class="text-xs mt-1">首页</span>
        </a>
        <a href="discover.html" class="nav-tab flex flex-col items-center text-gray-600">
            <i class="fas fa-compass text-xl"></i>
            <span class="text-xs mt-1">发现</span>
        </a>
        <a href="menu.html" class="nav-tab flex flex-col items-center text-gray-600">
            <i class="fas fa-list text-xl"></i>
            <span class="text-xs mt-1">菜单</span>
        </a>
        <a href="profile.html" class="nav-tab flex flex-col items-center text-gray-600">
            <i class="fas fa-user text-xl"></i>
            <span class="text-xs mt-1">我的</span>
        </a>
    </div>

    <script>
        // 轮播图功能
        document.addEventListener('DOMContentLoaded', function() {
            const carousel = document.querySelector('.carousel-inner');
            const indicators = document.querySelectorAll('.carousel-indicator');
            let currentIndex = 0;
            
            function updateCarousel() {
                carousel.style.transform = `translateX(-${currentIndex * 100}%)`;
                
                // 更新指示器
                indicators.forEach((indicator, index) => {
                    if (index === currentIndex) {
                        indicator.classList.add('active');
                    } else {
                        indicator.classList.remove('active');
                    }
                });
            }
            
            // 自动轮播
            setInterval(() => {
                currentIndex = (currentIndex + 1) % 3;
                updateCarousel();
            }, 5000);
            
            // 点击指示器切换轮播图
            indicators.forEach((indicator, index) => {
                indicator.addEventListener('click', () => {
                    currentIndex = index;
                    updateCarousel();
                });
            });
        });
        
        // 点赞功能
        function toggleLike(button, event) {
            // 阻止事件冒泡，防止触发菜谱卡片的点击事件
            event.stopPropagation();
            
            const icon = button.querySelector('i');
            const likeCount = button.nextElementSibling;
            const currentCount = parseInt(likeCount.textContent);
            
            // 添加点赞动画
            button.classList.add('like-animation');
            setTimeout(() => {
                button.classList.remove('like-animation');
            }, 500);
            
            if (icon.classList.contains('far')) {
                // 未点赞状态，切换为已点赞
                icon.classList.remove('far');
                icon.classList.add('fas', 'text-primary');
                button.classList.add('liked');
                likeCount.textContent = currentCount + 1;
                
                // 创建点赞特效
                createLikeEffect(event.clientX, event.clientY);
                
                // 保存点赞状态到本地存储
                const recipeId = button.closest('.glass-effect').querySelector('a').getAttribute('href').split('.')[0];
                saveLikeStatus(recipeId, true);
            } else {
                // 已点赞状态，切换为未点赞
                icon.classList.remove('fas', 'text-primary');
                icon.classList.add('far');
                button.classList.remove('liked');
                likeCount.textContent = currentCount - 1;
                
                // 保存点赞状态到本地存储
                const recipeId = button.closest('.glass-effect').querySelector('a').getAttribute('href').split('.')[0];
                saveLikeStatus(recipeId, false);
            }
        }
        
        // 创建点赞特效
        function createLikeEffect(x, y) {
            const heart = document.createElement('div');
            heart.innerHTML = '<i class="fas fa-heart text-primary"></i>';
            heart.style.position = 'fixed';
            heart.style.left = x + 'px';
            heart.style.top = y + 'px';
            heart.style.fontSize = '20px';
            heart.style.opacity = '0';
            heart.style.transition = 'all 0.5s ease';
            heart.style.zIndex = '1000';
            document.body.appendChild(heart);
            
            // 动画效果
            setTimeout(() => {
                heart.style.opacity = '1';
                heart.style.transform = 'translateY(-50px) scale(1.5)';
            }, 10);
            
            // 移除元素
            setTimeout(() => {
                heart.style.opacity = '0';
                heart.style.transform = 'translateY(-100px) scale(0.5)';
                setTimeout(() => {
                    document.body.removeChild(heart);
                }, 500);
            }, 1000);
        }
        
        // 保存点赞状态到本地存储
        function saveLikeStatus(recipeId, isLiked) {
            let likedRecipes = JSON.parse(localStorage.getItem('likedRecipes') || '{}');
            likedRecipes[recipeId] = isLiked;
            localStorage.setItem('likedRecipes', JSON.stringify(likedRecipes));
        }
        
        // 页面加载时恢复点赞状态
        document.addEventListener('DOMContentLoaded', function() {
            const likedRecipes = JSON.parse(localStorage.getItem('likedRecipes') || '{}');
            
            document.querySelectorAll('.glass-effect').forEach(recipeCard => {
                const linkElement = recipeCard.querySelector('a');
                if (!linkElement) return; // 跳过没有链接的卡片
                
                const recipeId = linkElement.getAttribute('href').split('.')[0];
                const likeButton = recipeCard.querySelector('.like-button');
                const likeCount = recipeCard.querySelector('.like-count');
                
                if (!likeButton || !likeCount) return; // 跳过没有点赞按钮或计数的卡片
                
                if (likedRecipes[recipeId]) {
                    const icon = likeButton.querySelector('i');
                    if (icon) {
                        icon.classList.remove('far');
                        icon.classList.add('fas', 'text-primary');
                        likeButton.classList.add('liked');
                    }
                }
            });
        });
    </script>
</body>
</html> 